<template>
  <li class="slide_item">
    <router-link
      :to="'solution-detail?id=' + detail.solutionId +
      '&solutionName=' + detail.solutionName +
      '&solutionFrameTitle=' + detail.solutionFrameTitle +
      '&solutionSceneTitle=' + detail.solutionSceneTitle +
      '&solutionSlogan=' + detail.solutionSlogan +
      '&solutionImg=' + detail.solutionImg">
      <img class="item_bg" v-lazy="detail.solutionMinImg" :key="detail.solutionMinImg" alt=""/>
      <div class="mask">
        <div class="bg "></div>
        <div class="content">
          <div class="item_img_panel">
            <img v-lazy="detail.solutionSilhouetteImg" :key="detail.solutionSilhouetteImg" alt="" class="item_img"/>
          </div>
          <p class="line_panel">
            <i class="item_line"></i>
          </p>
          <h3 class="item_title">{{detail.solutionName}}</h3>
          <p class="item_desc">{{detail.solutionIntroduce}}</p>
          <span class="item_link"></span>
        </div>
      </div>
    </router-link>
  </li>
</template>

<script>
export default {
  props: {
    detail: {
      type: Object
    }
  },
  methods: {
    handleDetail() {
      this.$router.push({
        path: 'solution-detail',
        name: 'SolutionDetail',
        params: {
          detail: this.detail
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
